<template>
    <div id="ljm">
        <div id="logo"></div>
        <div id="ljm_title">超高性能的海量存储服务</div>
        <!-- left component wrap -->
        <div class="l_wrap l_c_wrap">
            <!-- left component wrap com -->
            <div class="l_wrap_t">
                <div class="l_wrap_title">开启数据存储百微秒时代</div>
                <div class="l_wrap_desc">新一代EB级统一存储引擎,具备极致性能、超低耗时]海量可扩展性等特性</div>
                <div class="l_wrap_t_list">
                    <div class="l_wrap_t_list_item function">
                        <div class="l_wrap_t_list_item_title">极致性能</div>
                        <img src="../../../static/images/ljm/demo_1.png">
                    </div>
                    <div class="l_wrap_t_list_item flexibility">
                        <div class="l_wrap_t_list_item_title">弹性扩展</div>
                        <img src="../../../static/images/ljm/demo_2.png">
                    </div>
                    <div class="l_wrap_t_list_item safety">
                        <div class="l_wrap_t_list_item_title">安全合规</div>
                        <img src="../../../static/images/ljm/demo_3.png">
                    </div>
                    <div class="l_wrap_t_list_item stability">
                        <div class="l_wrap_t_list_item_title">稳定可靠</div>
                        <img src="../../../static/images/ljm/demo_4.png">
                    </div>
                </div>
            </div>
            <div class="l_wrap_b">
                <div class="l_wrap_title">百万IPOS云盘</div>
                <div class="l_wrap_indicator">
                    <div class="l_wrap_indicator_title">
                        <span>Lantency</span>
                    </div>
                    <div class="l_wrap_indicator_desc">
                        延时下降 
                        <span>80%</span>
                    </div>
                </div>
                <div class="l_wrap_description">
                    基于天权存储引擎,打造<span>百万IOPS、百微秒时延、4GB/S吞吐</span>的新一代云硬盘产品，可有效支撑大型数据库、实时日志分析等1O密码型以及AI训练、基因测序等高吞吐型业务场景。
                </div>
                <div class="l_wrap_line_chart">
                    <!-- 后期改为使用echarts组件 -->
                    <img src="../../../static/images/ljm/line_chart.png">
                </div>
            </div>
        </div>
        <div class="r_wrap l_c_wrap">
            <div class="r_wrap_t">
                <div class="r_wrap_data_list">
                    <div class="r_wrap_data_list_item" v-for="(item,index) in 5">
                        <img :src="'../../../static/images/ljm/data_'+(index+1)+'.png'">
                    </div>
                </div>
            </div>
            <div class="r_wrap_b">
                <div class="scene" v-for="(item,index) in sceneList" :key="index" :style={left:item.left,top:item.top}>
                    <div class="scene_top">
                        <img src="../../../static/images/ljm/scene_bg.png">
                        <span class="scene_icon">
                            <img :src="'../../../static/images/ljm/icon_'+(index+1)+'.png'">
                        </span>
                        <span class="scene_title" v-html="item.name"></span>
                        <span class="scene_info" v-html="item.info"></span>
                    </div>
                    <div class="scene_bottom scene_desc">
                        <div class="scene_desc_t" v-html="item.desc_1"></div>
                        <br>
                        <div class="scene_desc_b" v-html="item.desc_2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                sceneList:[
                    {name:'家庭安防',info:'对象防护',left:'10em',top:'15em',desc_1:"对象存储是一种海量的扁平化存储产品，满足用户在任何地方通过互联网对数据精修管理和访问的需求",desc_2:"高可靠、高性能、高可扩展<br> 数据读取首字节响应时延低于1s<br> 每Gbps接入带宽支持3000连接<br> 数据持久性:99.9999999999%"},
                    {name:'金融场景',info:'云硬盘',left:'34em',top:'30em',desc_1:"云硬盘是为云主机提供的块存储产品，满足极速性能，微秒时延的应用需求，提供安全可靠，高并发的块存储能力",desc_2:`极致性能:百万IOPS云盘，GB级吞吐量<br> 微秒时延:百微秒时延<br> 高可靠:数据持久性达99.9999999%<br> 高可用:服务可用性99.95%;<br> 弹性扩展:单云硬盘可达到32TB容量`},
                    {name:'办公场景',info:'文件存储',left:'50em',top:'12em',desc_1:"文件存储是面向多种云服务器的分布式文件系统服务, 提供标准的文件访问协议",desc_2:"共享访问<br>PB弹性可扩展<br>高可靠: 数据持久性:99.9999999999%<br>高可用: 服务可用性99.95%"}
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
#ljm{
    height: 100vh;
    background:url("../../../static/images/ljm/bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    box-sizing: border-box;
    // padding: 0 3vw;
    #logo{
        position: absolute;
        top:1vh;
        left:1vw;
        width: 2em;
        height: 0.2em;
        background-image: url("../../../static/images/ljm/logo.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left top;
    }
    #ljm_title{
        position: absolute;
        top:2vh;
        left:50%;
        transform: translateX(-50%);
        font-size: 0.3rem;
        background-image:-webkit-linear-gradient(top,rgb(177, 233, 249),rgb(106, 197, 224));
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
    .l_c_wrap{
        box-sizing: border-box;
        position: absolute;
        top:5vh;
        height: 90vh;
    }
    .l_wrap{
        left: 0;
        width:25vw;
        padding: 1% 0 0 2%;
        .l_wrap_title{
            position: absolute;
            top: 0.1rem;
            left: 0.5rem;
            font-size: 0.15rem;
            color: #FFF;
        }
        .l_wrap_t{
            height:50%;
            background-image: url("../../../static/images/ljm/l_wrap_t_bg.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            padding-top: 12%;
            position: relative;
            margin-bottom: 5%;
            .l_wrap_desc{
                padding: 3%;
                color:#FFF;
                font-size: 0.16rem;
            }
            .l_wrap_t_list{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 0 3%;
                .l_wrap_t_list_item{
                    width:48%;
                    background-size: 100% 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                    position: relative;
                    text-align: center;
                    .l_wrap_t_list_item_title{
                        color: #44deef;
                        font-size: 0.18rem;
                        font-weight: bold;
                        position: absolute;
                        top:3%;
                        left: 10%;
                    }
                    img{
                        width:100%;
                    }
                }
                .l_wrap_t_list_item:nth-child(1),
                .l_wrap_t_list_item:nth-child(2){
                    padding-top: 0.14rem;
                    height: 12vh;
                    background-image: url("../../../static/images/ljm/item_bg_s.png");
                    margin-bottom: 3%;
                }
                .l_wrap_t_list_item:nth-child(3),
                .l_wrap_t_list_item:nth-child(4){
                    padding-top:0.3rem;
                    height: 15vh;
                    background-image: url("../../../static/images/ljm/item_bg_xl.png");
                    img{
                        width:unset;
                        height: 90%;
                    }
                }
            }
        }
        .l_wrap_b{
            height:45%;
            position: relative;
            background-image: url("../../../static/images/ljm/l_wrap_b_bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
            padding-top: 0.5rem;
            .l_wrap_indicator{
                padding:0 3%;
                display: flex;
                flex-direction: column;
                .l_wrap_indicator_title{
                    width:100%;
                    height: 0.15rem;
                    line-height: 0.15rem;
                    color:#000;
                    font-size: 0.12rem;
                    span{
                        background-color: #76ddfb;
                        padding:0 0.1rem;
                        border-radius: 0.02rem;
                    }
                }
                .l_wrap_indicator_desc{
                    font-size: 0.18rem;
                    color:#00caee;
                    span{
                        font-size: 0.23rem;
                        font-weight: bold;
                        position: relative;
                    }
                    span::after{
                        content: "";
                        position: absolute;
                        right: -0.15rem;
                        bottom: 0rem;
                        width: 0; 
                        height: 0;
                        border-width: 0.05rem;
                        border-style: solid;
                        border-color:#eeda7e transparent transparent transparent;
                    }
                }
            }
            .l_wrap_description{
                color:#fff;
                font-size: 0.14rem;
                padding:1% 3%;
                span{
                    color:#00caee;
                }
            }
            .l_wrap_line_chart{
                padding: 1% 3%;
                img{
                    width:100%;
                }
            }
        }
    }
    .r_wrap{
        right: 0;
        width: 75vw;
        .r_wrap_t{
            padding-top:0.3rem;
            .r_wrap_data_list{
                display: flex;
                justify-content: space-around;
                padding:0 3%;
                .r_wrap_data_list_item{
                    width: 18%;
                    img{
                        width:100%;
                    }
                }
            }
        }
        .r_wrap_b{
            height: 70vh;
            .scene{
                font-size: 0.15rem;
                position: absolute;
                color:#fff;
                .scene_top{
                    position: relative;
                    width: 15vw;
                    img{
                        width: 100%;
                    }
                    span{
                        position: absolute;
                    }
                    span.scene_icon{
                        width:1.2em;
                        height: 1.2em;
                        top:0.5em;
                        left:4em;
                        img{
                            width: 100%;
                        }
                    }
                    span.scene_title{
                        top:0.5em;
                        left:6.3em;
                    }
                    span.scene_info{
                        top:0.8em;
                        left:13.5em;
                        font-size: 0.12rem;
                    }
                }
                .scene_desc{
                    width:18vw;
                    position: absolute;
                    left:3em;
                    top:4em;
                    padding: 1em;
                    background-color: rgba(1, 17, 51, 0.671);
                    .scene_desc_t{}
                    .scene_desc_b{
                        color:#66c2de;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
.arrow_down{
    margin-left: 10px;
    float: left;
    width: 0; 
    height: 0;
    border-width: 0.1rem;
    border-style: solid;
    border-color:#FFCCCC transparent transparent transparent;
}
</style>